<template>
  <a-modal
    v-model:visible="visible"
    :title="title + '菜单'"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="close"
  >
    <a-spin :spinning="spinning">
      <a-form
        ref="refForm"
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
      >
        <a-form-item label="菜单名称" name="menuName">
          <a-input v-model:value.trim="form.menuName" />
        </a-form-item>
        <a-form-item label="路由名称" name="name">
          <a-input v-model:value.trim="form.name" />
        </a-form-item>
        <a-form-item label="父菜单Id" name="parentId">
          <a-input-number v-model:value="form.parentId" :default-value="0" :precision="0" />
        </a-form-item>
        <a-form-item label="路由路径" name="path">
          <a-input v-model:value.trim="form.path" />
        </a-form-item>
        <a-form-item label="组件路径" name="component">
          <a-input v-model:value.trim="form.component" />
        </a-form-item>
        <a-form-item label="是否隐藏路由" name="isHidden">
          <a-switch v-model:checked="form.isHidden" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script lang="ts">
  import { message } from "ant-design-vue";
  import { computed, defineComponent, inject, ref } from "vue";
  import { FormDTO } from "../option";
  import { createMenu, updateMenu, getMenuDetail } from "/@/api/sys/menu";
  import { showErr } from "/@/util/util";
  export default defineComponent({
    setup() {
      const form = ref(new FormDTO());
      const visible = ref(false);
      const confirmLoading = ref(false);
      const spinning = ref(false);
      const title = computed(() => (form.value.id ? "编辑" : "新增"));
      const rules = {
        menuName: [{ required: true, message: "请填写菜单名称", trigger: "blur" }],
        name: [{ required: true, message: "请填写路由名称", trigger: "blur" }],
        path: [{ required: true, message: "请填写路由路径", trigger: "blur" }],
        component: [{ required: true, message: "请填写组件路径", trigger: "blur" }],
      };
      const refForm = ref();
      const requestFn = computed(() => (form.value.id ? updateMenu : createMenu));
      const loadPage: any = inject("loadPage");

      //
      const open = async (id?: number, parentId?: number) => {
        visible.value = true;
        if (id) {
          spinning.value = true;
          const { data } = await getMenuDetail(id);
          form.value = data;
          spinning.value = false;
        }
        if (parentId) {
          form.value.parentId = parentId;
        }
      };
      const close = () => {
        loadPage();
        form.value = new FormDTO();
        visible.value = false;
      };
      const handleOk = async () => {
        try {
          await refForm.value.validate();
          confirmLoading.value = true;
          const { data } = await requestFn.value(form.value);
          if (data) {
            message.success(`菜单${title.value}成功`);
            close();
          }
          confirmLoading.value = false;
        } catch (err) {
          showErr(err);
        }
      };
      return {
        title,
        visible,
        refForm,
        confirmLoading,
        spinning,
        handleOk,
        open,
        close,
        form,
        rules,
        loadPage,
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      };
    },
  });
</script>
